<template>
 <div class="dashboardBox">
    <div class="dashboar-header">
        <div class="dashboar-header-item" >
            <div class="dashboar-header-box">
                <div class="dashboar-header-image">
                    <img style="width:100%;height:100%" src="../../assets/images/dashboard2.png" alt="">
                </div>
                <div class="dashboar-header-text">
                    <div>
                        用户访问量 
                    </div>
                    <div style="font-size:32px">
                        {{dashboardData.total_visit}}
                    </div>
                </div>
            </div>
        </div>
     

        <div class="dashboar-header-item" >
            <div class="dashboar-header-box">
                <div class="dashboar-header-image">
                    <img style="width:100%;height:100%" src="../../assets/images/dashboard1.png" alt="">
                </div>
                <div class="dashboar-header-text">
                    <div>
                        用户总量
                    </div>
                    <div style="font-size:32px">
                        {{dashboardData.register_num}}
                    </div>
                </div>
            </div>
        </div>

        <div class="dashboar-header-item" >
            <div class="dashboar-header-box">
                <div class="dashboar-header-image">
                    <img style="width:100%;height:100%" src="../../assets/images/dashboard3.png" alt="">
                </div>
                <div class="dashboar-header-text">
                    <div>
                        订单总量
                    </div>
                    <div style="font-size:32px">
                        {{dashboardData.order_num}}
                    </div>
                </div>
            </div>
        </div>

        <div class="dashboar-header-item" >
            <div class="dashboar-header-box">
                <div class="dashboar-header-image">
                    <img style="width:100%;height:100%" src="../../assets/images/dashboard4.png" alt="">
                </div>
                <div class="dashboar-header-text">
                    <div>
                        订单收益
                    </div>
                    <div style="font-size:32px">
                        {{dashboardData.order_total_money}}
                    </div>
                </div>
            </div>
        </div>

        <div class="dashboar-header-item" >
            <div class="dashboar-header-box">
                <div class="dashboar-header-image">
                    <img style="width:100%;height:100%" src="../../assets/images/dashboard5.png" alt="">
                </div>
                <div class="dashboar-header-text">
                    <div>
                        实际收益
                    </div>
                    <div style="font-size:32px">
                        {{dashboardData.total_cash}}
                    </div>
                </div>
            </div>
        </div>
         
    </div>
    <n-card class="mt-12" title="每月订单收益" segmented>
      <div class="h-400">
        <VChart :option="trendOption" autoresize />
      </div>
    </n-card>
  </div>
</template>

<script setup lang="ts">
import { useUserStore } from '@/store'
import { BarChart, LineChart, PieChart } from 'echarts/charts'
import { GridComponent, LegendComponent, TooltipComponent } from 'echarts/components'
import * as echarts from 'echarts/core'
import { UniversalTransition } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'
import VChart from 'vue-echarts'
import { nextTick, onMounted, ref } from 'vue'
import { Https,setPagination } from "@/utils"
import api from "./api"
import Upload from "@/views/upload/index.vue"
const router = useRouter()

const userStore = useUserStore()

echarts.use([
  TooltipComponent,
  GridComponent,
  LegendComponent,
  BarChart,
  LineChart,
  CanvasRenderer,
  UniversalTransition,
  PieChart,
])

onMounted(()=>{
    dashboard()
})
const dashboardData = ref({
    order_num:0,
    order_total_money:0,
    register_num:0,
    total_cash:0,
    total_number:0,
    total_visit:0,
    x:[],
    y:[]
});
async function dashboard(){
  const res: any = await api.dashboardApi()
  if(res.code == 200){
    dashboardData.value = res.data[0]
    trendOption.value.series[0].data = dashboardData.value.y
    trendOption.value.series[1].data = dashboardData.value.y1
    console.log(trendOption.value.series[0].data)
  }
}

const trendOption = ref({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999',
      },
    },
  },
  legend: {
    top: '5%',
    data: ['订单收益', '订单数量'],
  },
  xAxis: [
    {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      axisPointer: {
        type: 'shadow',
      },
    },
  ],
  yAxis: [
    {
      type: 'value',
   
      axisLabel: {
        formatter: '{value}',
      },
    },
    {
      type: 'value',
       
      axisLabel: {
        formatter: '{value}',
      },
    },
  ],
  series: [
    {
      name: '订单收益',
      type: 'line',
      data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    },
    {
      name: '订单数量',
      yAxisIndex: 1,
      type: 'bar',
      data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    },
  ],
})

 
</script>
<style lang="scss" scoped>
    .dashboardBox{
        height: 100vh;
        overflow-y: auto;
    }
    .dashboar-header{
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        rid-auto-rows: 160px;
        gap: 20px;
        margin: 20px;
    }
    .dashboar-header-item{
        // background: red;
        // height: 160px;
        border: 1px solid #ccc;
        border-radius: 6px;
        padding: 10px;
    }
    .dashboar-header-box{
        display: flex;
        justify-content: space-around;
        padding: 10px;
        // align-items: center;
        // height: 100px;
    }
    .dashboar-header-image{
        height: 88px;
        width:88px;
    }
    .dashboar-header-text{
        font-weight: bold;
        background: -webkit-linear-gradient(45deg, blue, rgb(182, 23, 23)); /* Chrome, Safari */
        background: linear-gradient(45deg, blue, red); /* 标准语法 */
        -webkit-background-clip: text; /* Chrome, Safari */
        background-clip: text;
        -webkit-text-fill-color: transparent; /* Chrome, Safari */
        color: transparent; /* 兼容不支持background-clip的浏览器 */
        font-weight: 700;
        font-family: sans-serif;
        font-size: 16px;
        // margin: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        
    }

</style>
 